<template>
  <view class="page">
    <Navbar
      title="消息详情"
      occupy
      :scroll-top="10"
      scroll-bg-color="#15161c"
      scroll-color="#fff"
    >
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <Sub-title
      :label="detail.messageTitle || '-'"
      color="#fff"
      size="28rpx"
      :bold="false"
      padding="30rpx 0 10rpx 0"
    />
    <Sub-title
      :label="detail.createTime || '-'"
      color="#bababa"
      size="24rpx"
      :bold="false"
      border
      padding="10rpx 0 30rpx 0"
    />
    <view class="content">
      <u-parse :content="detail.messageContent" />
    </view>
  </view>
</template>

<script>
import { getMessageDetail } from "@/request/myApi.js";
export default {
  data() {
    return {
      messageId: "", // 消息id
      detail: {}, // 消息详情
    };
  },
  onLoad(e) {
    this.messageId = e.id;
    this.getData();
  },
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  methods: {
    // 获取消息详情
    getData() {
      getMessageDetail(this.messageId).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  overflow: auto;
  min-height: 100vh;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  padding: 30rpx;
  box-sizing: border-box;
  .content {
    margin-top: 20rpx;
    color: #dadada;
    font-size: 28rpx;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 46rpx;
  }
}
</style>
